<template>
    <div id="relationEventForward">
        <el-row>
            <div class="head-line-bottom">
                <i class="el-icon-message-solid left"></i>
                在归因分析中作为归因的辅助曝光点参与计算，提升归因模型的计算精度
            </div>
        </el-row>

        <div class="box-center">
            <template v-for="(item,index) in relationList">
                <div class="box-context" :key="item.key">
                    <el-row>
                        <el-col :span="1"><el-tag type="success">{{String.fromCharCode(65+(index%26))}}</el-tag></el-col>
                        <el-col :span="3" class="col-item relation-text">前向关联事件</el-col>
                        <el-col :span="11">
                            <el-select size="small" class="relation-sel" value-key="eventId" v-model="item.item" @change="selectItem(item.item,index)">
                                <el-option v-for="cItem in thingList" :value="cItem"
                                           :label="cItem.cname"></el-option>
                            </el-select>
                            <el-button size="small" type="text" ></el-button>
                            <el-button size="small" type="text" icon="el-icon-plus" @click="addCustom(index)">添加筛选</el-button>
                            <el-button size="small" type="text" icon="el-icon-close" @click="removeItem(index)"></el-button>
                        </el-col>
                        <el-col :span="6"><div class="box-occupy"></div></el-col>
                        <el-col :span="3" class="col-item">
                            关联属性
                            <el-switch v-model="item.elSwitch" >
                            </el-switch>
                        </el-col>
                    </el-row>
                    <template v-if="item.elSwitch">
                        <div class="box-context">
                            <el-row>
                                <el-col :span="1"><div class="box-occupy"></div></el-col>
                                <el-col :span="3" class="col-item"> <i class="el-icon-paperclip relation-text"></i>关联属性</el-col>
                                <el-col :span="20" class="col-item">
                                    <el-select size="small" class="relation-sel" value-key="eventId" v-model="relationMain" disabled>
                                        <el-option v-for="cItem in thingList" :value="cItem"
                                                   :label="cItem.cname"></el-option>
                                    </el-select>

                                    <el-select size="small" class="relation-sel-value" value-key="name" v-model="item.link.current">
                                        <el-option v-for="cItem in eventPropertiesList" :value="cItem"
                                                   :label="cItem.cname"></el-option>
                                    </el-select>

                                    <span style="margin-left: 10px">关联</span>

                                    <el-select size="small" class="relation-sel" style="margin-left: 10px" value-key="eventId" v-model="item.item" disabled>
                                        <el-option v-for="cItem in thingList" :value="cItem"
                                                   :label="cItem.cname"></el-option>
                                    </el-select>

                                    <el-select size="small" class="relation-sel-value" value-key="name" v-model="item.link.target">
                                        <el-option v-for="cItem in item.propertes" :value="cItem"
                                                   :label="cItem.cname"></el-option>
                                    </el-select>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                    <ml-custom-screen :ref="`customScreenRef${index}`" :isSupName="true" :supName="item.item.eventId"></ml-custom-screen>
                </div>
            </template>
        </div>

        <div class="box-context-last">
            <el-button size="small" type="text" icon="el-icon-plus" @click="relationEventAdd">添加前向关联事件</el-button>
        </div>

    </div>
</template>

<script>
    import vue from "./bus"
    import customScreen from "./customScreen";
    import {thinglList,propertyList} from "./attribution"
    export default {
        name: "relationEventForward",
        components:{
            'ml-custom-screen': customScreen
        },
        props:{
          relationMain:{
              type:Object
          }
        },
        data() {
            return {
                // link_events
                //作为当前relationList的记录 防止重复
                keys: 0,
                //存储当前事件的集合
                relationList: [],
                //主事件对应的属性列表
                thingList:[],
                //选择事件属性列表
                eventPropertiesList:[],
            }
        },
        created() {
            this.initData()
        },
        methods: {
            //获取发送给后端的数据
            getLinkEvents(){
                let linkEvents = [];
                for (let i = 0; i < this.relationList.length; i++) {
                    let item = {}
                    item['eventName'] = this.relationList[i].item.eventId
                    item['filter'] = this.$refs[`customScreenRef${i}`][0].getFilterConditions()
                    if (this.relationList[i].link?.current?.name&&this.relationList[i]?.link.target?.name){
                        item['linkProperties'] = {
                            currentEventProperty: 'event.' + this.relationMain.eventId + '.' + this.relationList[i].link.current.name,
                            targetEventProperty: 'event.' + this.relationList[i].item.eventId + '.' + this.relationList[i].link.target.name
                        }
                    }else{
                        item['linkProperties'] = {}
                    }
                    linkEvents.push(item)
                }
                return linkEvents
            },

            //添加筛选项
            addCustom(index){
                this.$refs[`customScreenRef${index}`][0].editCond()
            },
            //删除item
            removeItem(index){
                this.relationList.splice(index,1)
                sessionStorage.setItem('forwardList',JSON.stringify(this.relationList))
            },
            //选择item前向关联事件
            selectItem(item,index){
                let _this = this
                let params = {
                    req: {
                        events: [item.eventId],
                        type: "event",
                        needEventTime: true
                    },
                    operationCtx: {}
                };
                propertyList(params).then((res) => {
                    if (res.data.success !== true) {
                        this.$message.error(res.data.errorMessage);
                        return;
                    }
                    _this.relationList[index].propertes=res.data.value.list;

                    sessionStorage.setItem('forwardList',JSON.stringify(_this.relationList))
                })
            },
            relationEventAdd() {
                this.relationList.push({
                    key: Symbol(''),
                    elSwitch: false,
                    item: this.thingList[0],
                    propertes: [],
                    link: {current: {}, target: {}}
                })
                this.selectItem(this.thingList[0], this.relationList.length - 1)
                sessionStorage.setItem('forwardList',JSON.stringify(this.relationList))
            },
            initData(){
                //全部回档
                this.keys = 0
                this.relationList = []
                this.thingList = []
                this.eventPropertiesList = []
                //获取所有事件
                let _this = this;
                let network = new Promise((resolve, reject) => {
                    let params = {
                        "req": {
                            "appId": JSON.parse(window.sessionStorage.getItem('appItem')).appId
                        },
                        "operationCtx": {}
                    };
                    thinglList(params).then(res => {
                        if (res.data.success !== true) {
                            reject(res.data.errorMessage)
                            return;
                        }
                        _this.thingList = res.data.value.list;
                        resolve()
                    })
                })

                //关联属性 主
                network.then(value => {
                    return new Promise((resolve, reject) => {
                        let params = {
                            req: {
                                events: [_this.relationMain.eventId],
                                type: "event",
                                needEventTime: true
                            },
                            operationCtx: {}
                        };
                        propertyList(params).then((res) => {
                            if (res.data.success !== true) {
                                this.$message.error(res.data.errorMessage);
                                reject(res.data.errorMessage)
                                return;
                            }
                            _this.eventPropertiesList=res.data.value.list;
                            sessionStorage.setItem('forwardList',JSON.stringify(this.relationList))
                            resolve()
                        })
                    })
                },error=>{
                    _this.$message.error(error)
                })

            }
        },
        watch:{

        }
    }
</script>

<style scoped lang="scss">

    #relationEventForward{
        min-height: 200px;
    }
    .head-line-bottom {
        padding: 5px 0px;
        background-color: #e6f7ff;
        width: 100%;
        height: 20px;

        .left {
            margin-left: 5px;
        }
    }

    .box-center{
        max-height: 350px;
        overflow: auto;
    }

    .box-context {
        margin-top: 20px;
        .col-item{
            height: 32px;
            line-height: 32px;
        }
        .relation-text{
            padding-left: 7px;
        }
        .relation-sel{
            width: 200px;
        }
        .relation-sel-value{
            margin-left: 10px;
            width: 120px;
        }
        .box-occupy{
            height: 1px;
        }
    }

    .box-context-last{
        position: relative;
        .col-item{
            height: 32px;
            line-height: 32px;
        }
        .relation-text{
            padding-left: 7px;
        }
        .relation-sel{
            width: 200px;
        }
        .relation-sel-value{
            margin-left: 10px;
            width: 120px;
        }
        .box-occupy{
            height: 1px;
        }
    }
</style>